﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="web_CategoryMS.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <title>登录页</title>
</head>


<body>

    
    
<div id="particles-js" >
     <form id="form1" runat="server">
		<div class="login" runat="server">
			<div class="login-top">
				登录
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/name.png"/></div>
				<div class="login-center-input" >

                    <asp:TextBox runat="server" ID="txtUserName"></asp:TextBox>
<%--                     <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>--%>
<%--					<input type="text" name="" value="" placeholder="请输入您的用户名"  runat="server" id="TextBox1"   onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>--%>
					<div class="login-center-input-text">用户名</div>


				</div>
			</div>
			<div class="login-center clearfix">
				<div class="login-center-img"><img src="img/password.png"/></div>
				<div class="login-center-input">
                     <asp:TextBox TextMode="Password" runat="server" ID="txtPassword"></asp:TextBox>
<%--					<input type="password" name=""value="" placeholder="请输入您的密码"  runat="server" id="txtPassword" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>--%>
					<div class="login-center-input-text">密码</div>
				</div>
			</div>
			<div class="login-button">
			
                
                  <asp:Button runat="server" ID="Button1" BackColor="dodgerblue" Text="登录"  height="100%" Width="100%"   BorderColor="Transparent" BorderStyle="None"   OnClick="btnLogin_Click"/>
			</div>
		</div>
		<div class="sk-rotating-plane"></div>
     </form>
</div>



<!-- scripts -->
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }
    document.querySelector(".login-button").onclick = function () {
        addClass(document.querySelector(".login"), "active")
        setTimeout(function () {
            addClass(document.querySelector(".sk-rotating-plane"), "active")
            document.querySelector(".login").style.display = "none"
        }, 800)
        setTimeout(function () {
            removeClass(document.querySelector(".login"), "active")
            removeClass(document.querySelector(".sk-rotating-plane"), "active")
            document.querySelector(".login").style.display = "block"
            alert("登录成功")

        }, 5000)
    }
</script>



 <%--   <form id="form2" runat="server">
        <div>
            <table width="400">
                <tr>
                    <td width="40%" align="right">
                        账号：
                    </td>
                    <td width="60">
                        <asp:TextBox runat="server" ID="txtUserName"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td width="40%" align="right">
                        密码：
                    </td>
                    <td width="60">
                        <asp:TextBox TextMode="Password" runat="server" ID="txtPassword"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <asp:Button runat="server" ID="btnLogin" Text="登录" Width="150px" OnClick="btnLogin_Click"/>
                    </td>
                </tr>
            </table>
        </div>
    </form>--%>
</body>
</html>
